<template>
  <div>
    <Icon
      v-show="show_con_ico"
      @click="collapsedSider"
      type="ios-settings-outline"
      size="24"
      style="
        z-index: 3;
        float: right;
        position: fixed;
        overflow: auto;
        right: 18px;
        top: 18px;
      "
    ></Icon>

    <!-- 侧边栏 -->
    <Sider
      :width="250"
      collapsible
      hide-trigger
      :collapsed-width="0"
      v-model="isCollapsed"
      :style="{
        position: 'fixed',
        height: '100vh',
        left: 0,
        top: '55px',
        overflow: 'auto'
      }"
      style="
        z-index: 1;
        background-color: #fff;
        border-right-width: 2px;
        border-color: rgb(220, 222, 226);
        border-style: solid;
      "
    >
      <!-- 搜索框 -->
      <Input
        v-model="search_info"
        search
        enter-button
        placeholder="搜索链接..."
        @on-search="click_search"
        style="padding: 10px; padding-top: 20px"
      />
      <Tree
        style="padding: 10px"
        expand-node
        :data="tree_data"
        class="demo-tree-render"
        @on-toggle-expand="get_showList"
      ></Tree>
    </Sider>

    <div
      style="height: 100vh"
      @click="click_content"
      :style="'padding-left: ' + padding_left + '; padding-right: 5px'"
    >
      <!-- 链接卡片 -->
      <div v-show="show_card" style="margin: 20px 10px">
        <Card
          v-for="(item, i) in showDadaList"
          :key="i"
          style="display: inline-block; margin: 10px 10px"
          target="_blank"
        >
          <template #title>
            <div style="text-align: center">
              <h3>{{ item.link.linkName }}</h3>
            </div>
          </template>
          <div style="text-align: center">
            <Image
              :src="item.link.linkLogo"
              fit="contain"
              width="85px"
              height="40px"
              v-if="!item.link.linkLogo == ''"
            >
              <template #error>
                <Icon type="ios-image-outline" size="24" color="#ccc" />
              </template>
            </Image>
            <h6 style="font-weight: normal">
              {{ item.link.describe ? item.link.describe : '暂无描述' }}
            </h6>

            <a @click="fun_show_iframe(item.link.linkSite)">在线预览</a>
            &nbsp;
            <a :href="item.link.linkSite" target="_blank">新窗口打开</a>
          </div>
        </Card>
      </div>

      <!-- 显示网站 -->
      <iframe
        :style="{
          width: '-webkit-fill-available',
          height: screenHeight - 70 + 'px',

          paddingRight: '5px'
        }"
        :src="iframe_src"
        v-show="show_iframe"
      >
      </iframe>
    </div>
  </div>
</template>

<script>
import {
  PATH_Directory_tree_blogroll,
  aliyun_oss_path,
  nodeType_children_node,
  nodeType_root_node,
  nodeType_link,
  break_width
} from '@/mylibs/define'
import get_oss_data from '@/api/aliyun_oss'
import { resolveComponent } from 'vue'
import eventBus from '@/eventBus/eventBus'

export default {
  name: 'Link',
  data() {
    return {
      tree_data: [],
      isCollapsed: false,
      showDadaList: [],
      screenWidth: null,
      screenHeight: null,
      show_con_ico: true,
      padding_left: '250px',
      iframe_src: '',
      show_iframe: false,
      show_card: true,
      search_info: ''
    }
  },

  watch: {
    screenWidth: {
      handler: function (val, oldVal) {
        // 768px(md)
        if (val < break_width) {
          this.isCollapsed = true
          this.padding_left = '0px'
        } else {
          this.isCollapsed = false
          this.padding_left = '250px'
        }
      },
      immediate: true
    }
  },

  methods: {
    click_content() {
      if (this.screenWidth < break_width) {
        this.isCollapsed = true
      }
    },
    // 从oss获取目录树数据
    async getTreeData(fun_back) {
      var { res, ok, err } = await get_oss_data(
        aliyun_oss_path + PATH_Directory_tree_blogroll
      )
      if (ok) {
        if (Array.isArray(res)) {
          this.tree_data = res
          this.Recursive_directory_tree(this.tree_data)
          if (fun_back) {
            fun_back(this.tree_data[0])
          }
        } else {
          this.$Notice.error({ desc: '数据非数组' })
        }
      } else {
        this.$Notice.error({ desc: '获取数据失败' })
      }
    },

    //递归目录树数据,设置不同样式
    Recursive_directory_tree(dirData) {
      for (let index = 0; index < dirData.length; index++) {
        const element = dirData[index]
        // 设置链接节点样式
        if (element.node_type && element.node_type == nodeType_link) {
          element['render'] = (h, { root, node, data }) => {
            return h(
              'span',
              {
                style: {
                  display: 'inline-block',
                  width: '100%'
                }
              },
              [
                h('span', [
                  h(resolveComponent('Icon'), {
                    type: 'ios-link-outline',
                    style: {
                      marginRight: '8px'
                    }
                  }),
                  h('span', data.title)
                ])
              ]
            )
          }
        }

        // 子文件夹样式
        if (element.node_type && element.node_type == nodeType_children_node) {
          element['render'] = (h, { root, node, data }) => {
            return h(
              'span',
              {
                style: {
                  display: 'inline-block',
                  width: '100%'
                }
              },
              [
                h('span', [
                  h(resolveComponent('Icon'), {
                    type: 'ios-ionitron-outline',
                    style: {
                      marginRight: '8px'
                    }
                  }),
                  h('span', data.title)
                ])
              ]
            )
          }
        }
        // 根文件夹样式
        if (element.node_type && element.node_type == nodeType_root_node) {
          element['render'] = (h, { root, node, data }) => {
            return h(
              'span',
              {
                style: {
                  display: 'inline-block',
                  width: '100%'
                }
              },
              [
                h('span', [
                  // vue3
                  h(resolveComponent('Icon'), {
                    type: 'ios-ionitron-outline',
                    style: {
                      marginRight: '8px'
                    }
                  }),
                  h('span', data.title)
                ])
              ]
            )
          }
        }
        if (element.children && element.children.length != 0) {
          // 子文件夹
          this.Recursive_directory_tree(element.children)
        }
      }
    },

    // 侧边栏控制显示
    collapsedSider(e) {
      if (e) e.stopPropagation()
      this.isCollapsed = this.isCollapsed ? false : true

      if (this.isCollapsed) {
        this.padding_left = '0px'
      } else if (!this.isCollapsed && this.screenWidth >= break_width) {
        this.padding_left = '250px'
      }
    },
    // 获取展示区数据
    get_showList(node, isRec) {
      if (!node || !node.children) return
      if (!isRec) {
        this.showDadaList.splice(0, this.showDadaList.length)
        // 切换卡片与iframe的显示
        this.show_card = true
        this.show_iframe = false
      }
      for (let index = 0; index < node.children.length; index++) {
        const element = node.children[index]

        if (element.node_type && element.node_type == nodeType_link) {
          this.showDadaList.push(element)
        }

        // 递归子文件夹
        if (element.children && element.children.length != 0) {
          this.get_showList(element, true)
        }
      }
    },

    deal_content_click() {
      if (this.screenWidth < break_width) {
        this.isCollapsed = true
      }
    },

    // 显示网站
    fun_show_iframe(href) {
      if (href.indexOf('https') == -1) {
        this.$Notice.info({ desc: '该链接不支持https,请选择"新窗口打开"' })

        return
      }
      this.show_card = false
      this.show_iframe = true
      this.iframe_src = href
    },
    // 搜索文章
    search_data(list) {
      var datalist = this.tree_data
      if (list) {
        datalist = list
      } else {
        this.showDadaList.splice(0, this.showDadaList.length)

        // 切换卡片与iframe的显示
        this.show_card = true
        this.show_iframe = false
      }

      for (let index = 0; index < datalist.length; index++) {
        var element = datalist[index]
        if (
          element.title.indexOf(this.search_info) != -1 &&
          element.node_type == nodeType_link
        ) {
          this.showDadaList.push(element)
        }

        // 递归子文件夹
        if (element.children && element.children.length != 0) {
          this.search_data(element.children)
        }
      }
    },

    click_search() {
      this.search_data()
    }
  },

  created() {
    this.getTreeData(this.get_showList)
    // eventBus.on('home_content_clik', this.deal_content_click)
    eventBus.on('ev_screen_width_height', ({ w, h }) => {
      this.screenWidth = w
      this.screenHeight = h
    })
  },

  activated() {
    // eventBus.on('home_content_clik', this.deal_content_click)
    eventBus.on('ev_screen_width_height', ({ w, h }) => {
      this.screenWidth = w
      this.screenHeight = h
    })
  }
}
</script>

<style>
.demo-tree-render .ivu-tree-title {
  width: 100%;
}
</style>
